<template>
  <div class="home" v-title data-title="用户指南">
      <div class="two-wheels" v-show="twoShow">
        <div class="two-title" @click="twoWheels">2轮车使用说明 <i :class="{'at': twoList}"></i></div>
        <ul class="clearfix" v-show="twoList">
          <li><a  href="/agreements/prototype/userRegister.html">注册</a></li>
          <li><a :href="url1">如何使用车辆</a></li>
          <li><a href="/agreements/prototype/clientServiceCertification.html">资质认证</a></li>
          <li><a href="/agreements/prototype/clientServiceReturn.html">还车流程</a></li>
          <li><a href="/agreements/prototype/depositRoles.html">关于押金</a></li>
          <li><a href="/agreements/prototype/clientServicePay.html">支付</a></li>
          <li><a href="/agreements/prototype/chargingRoles.html">计费规则</a></li>
          <li><a href="/agreements/prototype/clientServiceDepositBack.html">退押金</a></li>
          <li><a href="/agreements/prototype/maintenance.html">运维收费标准</a></li>
        </ul>
      </div>
      <div class="four-wheels" v-show="fourShow">
        <div class="four-title" @click="fourWheels" >4轮车使用说明 <i :class="{'at': fourList}"></i></div>
        <ul class="clearfix" v-show="fourList">
          <li><a href="/agreements/prototype/userLogin.html">注册</a></li>
          <li><a :href="url2">如何使用车辆</a></li>
          <li><a href="/agreements/prototype/clientServiceCertification.html">资质认证</a></li>
          <li><a href="/agreements/prototype/clientServiceReturn.html">还车流程</a></li>
          <li><a href="/agreements/prototype/depositRoles.html">如何缴纳押金</a></li>
          <li><a href="/agreements/prototype/clientServicePay.html">支付</a></li>
          <li><a href="/agreements/prototype/chargingRoles.html">计费规则</a></li>
          <li><a href="/agreements/prototype/RefundTheDeposit.html">退押金</a></li>
          <li><a href="/agreements/prototype/carLease.html">汽车租赁协议</a></li>
          <li><a href="/agreements/prototype/serve.html">车主服务协议</a></li>
        </ul>
      </div>
      <div class="service"><span @click="phoneCall('0558-3688688')" >人工客服</span><span @click="feedback">意见反馈</span></div>
</div>
</template>

<script>
var wx = require('weixin-js-sdk');
  export default {
    data () {
      return {
        twoShow:true,
        fourShow:false,
        twoList:true,
        fourList:true,
        car:'',
        wx_app:'',
        insurance:'',
        sdew:'',
        url1:'',
        url2:'',
      }
    },
    methods:{
      twoWheels(){
          this.twoList = !this.twoList;
      },
      fourWheels(){
        this.fourList = !this.fourList;
      },
      feedback(){
        var userAgentObj = navigator.userAgent;
        console.log(this.wx_app)
        if(this.wx_app){
          if(this.detail == 'true'){
            my.navigateTo({
              url: '/pages/userPage/opinion/opinion'
            })
          }else{
            wx.miniProgram.navigateTo({url: '/pages/user/opinion/opinion'})
          }
        }else{
          if(userAgentObj.match(/Android/i)){
            window.control.feedback();
          }else if(userAgentObj.match(/iPhone/i))
          {
            feedback()
          }
        }
      },
      phoneCall (msg) {
        var userAgentObj = navigator.userAgent;
        if(this.wx_app){
            window.location.href = 'tel://' + msg;
        }else{
          if(userAgentObj.match(/Android/i)){
            window.control.phoneCall();
          }else if(userAgentObj.match(/iPhone/i)){
            window.location.href = 'tel://' + msg;
          }
        }
      }
    },
    mounted () {
      if(this.$route.query.app==1){
          this.insurance = this.$route.query.insurance;
          this.sdew = this.$route.query.sdew;
          this.app=1;
      }else{
          this.insurance = this.$route.query.insurance;
          this.sdew = this.$route.query.sdew;
          this.detail = this.$route.query.detail;
          this.app=0;
      }
      if(this.insurance == 'undefined'){
        this.insurance = 'null'
      }
      if(this.sdew == 'undefined'){
        this.sdew = 'null'
      }
      this.url1 = '#/app/help1?insurance='+this.insurance+'&sdew='+this.sdew+'&app='+ this.app;
      this.url2 = '#/app/help2?insurance='+this.insurance+'&sdew='+this.sdew+'&app='+ this.app;

      this.car = this.$route.query.car;
      this.wx_app = this.$route.query.wx_app;
      if(this.car == 0){
        this.twoShow = true;
        /*this.fourShow = true;*/
      }else if(this.car == 1){
        this.fourShow = false;
      }else if(this.car == 2){
        this.twoShow = false;
      }else if(this.car == 3){
        this.twoShow = true;
        /*this.fourShow = true;*/
      }
    }
  }
</script>

<style scoped >
  @import "../styles/styles.css";
  .two-wheels,.four-wheels{
    width: 90%;
    margin:0 auto;
  }
  .two-title,.four-title{
    position: relative;
    width: 100%;
    height:1.10rem;
    font:0.28rem/1.10rem "Mircosoft YaHei";
    font-weight: 600;
    border-bottom:1px solid #f1f1f1;
    color:#333;
  }
  .two-wheels ul,.four-wheels ul{
    margin-top:0.2rem;
  }
  .two-wheels li,.four-wheels li{
    float:left;
    width: 50%;
    height:0.77rem;
  }
  .two-title i,.four-title i{
    position: absolute;
    top:0.48rem;
    right:0.16rem;
    display: inline-block;
    width: 0.15rem;
    height:0.15rem;
    border-bottom:1px solid #bcbcbc;
    border-left:1px solid #bcbcbc;
    transform:rotate(-135deg);
  }
  .two-title i.at,.four-title i.at{
    transform:rotate(-45deg);
  }
  a {
    text-decoration: none;
    color: #666;
    font: 0.26rem/0.77rem "Mircosoft YaHei";
    border-bottom:1px solid #666;
  }
  .service{
    position: fixed;
    left:5%;
    bottom:.3rem;
    width: 90%;
    margin:0 auto;
  }
  .service span:nth-of-type(1),.service span:nth-of-type(2){
    display: inline-block;
    width: 3.84rem;
    height:0.98rem;
    font:0.28rem/0.98rem "Mircosoft YaHei";
    text-align: center;
    border-radius: 0.5rem;
    background: #ff5d2e;
    color:#fff;
  }
  .service span:nth-of-type(2){
    width: 2.5rem;
    margin-left:0.34rem;
    background:#fff;
    border:1px solid #e5e5e5;
    color:#666;
  }
</style>
